<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" class="ico"/>
    <link rel="stylesheet" type="text/css" href="style/cssReset.css">
    <link rel="stylesheet" type="text/css" href="style/index.css">
    <script src="js/jquery-1.12.2.min.js"></script>
</head>
<body>
    <div class="header">
        <div class="headerC banxin clearfix">
            <div class="logo fl">
                <h1><a href="#">锤子</a></h1>
            </div>
            <div class="links fl">
                <ul>
                    <li><a href="#">在线商城</a></li>
                    <li><a href="#">坚果Pro</a></li>
                    <li><a href="#">Smartisan M1 / M1L</a></li>
                    <li><a href="#">Smartisan OS</a></li>
                    <li><a href="#">欢喜云</a></li>
                    <li><a href="#">应用下载</a></li>
                    <li><a href="#">官方论坛</a></li>
                </ul>
            </div>
            <div class="small-icon fr">
                <div class="user fl">
                    <a href="#"></a>
                </div>
                <div class="car fl">
                    <a href="#">
                        <span>0</span>
                    </a>
                    <div class="buyCar">
                        <span></span>
                        <h3>购物车为空</h3>
                        <p>您还没有选购任何商品，现在前往商城选购吧！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $(".small-icon .car").hover(function () {
                $(this).find(".buyCar").stop().fadeIn(300);
                $(this).children("a").css("background-position", "-5px -22px");
            },function(){
                $(this).find(".buyCar").stop().fadeOut(300);
                $(this).children("a").css("background-position", " -154px -22px");
            });
        });
    </script>
    <div class="nav">
        <div class="shade"></div>
        <div class="phone-list">
            <!--<div class="shade"></div>-->
            <ul>
                <li>
                    <a href="#">
                        <div class="phone-img">
                            <img src="images/phone-list-001.png" alt=""/>
                        </div>
                        <div class="phone-name">坚果 Pro</div>
                        <div class="phone-price">¥ 1,499 起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="phone-img">
                            <img src="images/phone-list-001.png" alt=""/>
                        </div>
                        <div class="phone-name">Smartisan M1 / M1L</div>
                        <div class="phone-price">¥ 2,499 起</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="banxin">
            <div class="nav-links ">
                <ul class="fl">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">“足迹系列”手感膜</a></li>
                    <li><a href="#">官方配件</a></li>
                    <li><a href="#">周边产品</a></li>
                    <li><a href="#">第三方配件</a></li>
                    <li><a href="#">全部商品</a></li>
                    <li><a href="#">服务</a></li>
                </ul>
            </div>
        </div>
        <div class="line"></div>

    </div>
    <script>
        $(function(){
            function show(){
                $(".nav > .shade").stop().slideDown(200);
                $(".phone-list ul").stop().fadeIn(200);
                $(".nav .line").stop().fadeIn(200);
            };
            function hide(){
                $(".nav > .shade").stop().slideUp(200);
                $(".phone-list ul").stop().fadeOut(200);
                $(".nav .line").stop().fadeOut(200);
            }

            $(".nav-links li:eq(1)").on("mouseenter", function(){
                show();
            }).siblings().on("mouseenter", function () {
                hide();
            });
            $(".header").on("mouseenter", function () {
                hide();
            });
            $(".phone-list li a").hover(function () {
                $(this).find("img").stop().animate({
                    top: $(this).position().top - 5
                });
            }, function () {
                $(this).find("img").stop().animate({
                    top: $(this).stop().position().top + 5
                });
            });

           /* var flag = true;
            $(window).scroll(function(){
                if($(window).scrollTop() > $(".header").height()+parseInt($(".nav").css("padding-top"))){
                    if(flag){
                        flag = false;
                        $(".nav").css({
                            "display": "none",
                            "position": "fixed",
                            "top": 0,
                            "padding": "16px 0",
                            "background-color": "#fff",
                            "box-shadow": "0 0px 5px #ddd"
                        }).stop().slideDown(200);
                        $(".nav > .shade").css("height",60).stop().fadeTo(200,0.2);
                    }
                }else{
                    flag = true;
                    $(".nav").css({
                        "display": "block",
                        "position": "relative",
                        "padding": "31px 0",
                        "background-color": "rgb(237,237,237)",
                        "box-shadow": "0 0px 0px trangsparent"
                    });
                    $(".nav > .shade").css("height",90).stop().fadeTo(200,0);
                }
            });*/
        });
    </script>


</body>
</html>